<template>
    <div class="main_warp">
        <div class="photo">
            <h3>最新照片</h3>
            <el-row class="photo_list clearFix" :gutter="10">
                <el-col :span="6" v-for="(item,k) in latestPhotosList" :key="k">
                    <el-image :src="item.pictureUrl | pictureUrl" style="height:150px" fit="cover">
                        <div slot="placeholder" class="image-slot">
                            加载中<span class="dot">...</span>
                        </div>
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </el-col>
            </el-row>
        </div>
        <div class="guestbook">
            <h3 v-if="userInfoN.id != userInfo.id"><i class="el-icon-postcard"></i>留言板</h3>
            <h3 style="color: #909399;" v-if="userInfoN.id == userInfo.id">个人寄语:
                <h2>{{masterMessageP}}
                    <el-popover placement="left" width="360" v-model="masterVisible">
                        <p>设置主人寄语</p>
                        <el-input type="textarea" v-model="replysTextarea1" placeholder="请输入..."
                        maxlength="30">
                        </el-input>
                        <div style="text-align: right; margin: 0">
                            <el-button size="mini" type="text" @click="masterVisible = false">
                                取消
                            </el-button>
                            <el-button type="primary" size="mini" @click="masterMessage">设置
                            </el-button>
                        </div>
                        <el-dropdown-item slot="reference">
                            <el-button type="text">---设置</el-button>
                        </el-dropdown-item>
                    </el-popover>
                </h2>
            </h3>
            <h3 style="color: #909399;" v-if="userInfoN.id != userInfo.id">主人寄语:<h2>{{masterMessageP}}</h2>
            </h3>
            <Comment :data='userInfoN' @getLeaveList='getLeaveList' v-if="userInfo.id"></Comment>
            <h3>留言 ({{totals}}) <el-button type="text"></el-button>
            </h3>
            <div class="leaving">
                <div class="leaving_lisr" v-for="(item, index) in leaveList.list " :key="index">
                    <div class="leaving_people clearFix">
                        <div class="avatar">
                            <el-avatar :size="50" :src="item.photo | pictureUrl" @error="errorHandler">
                            </el-avatar>
                        </div>
                        <div class="leaving_detail" style="min-width:320px">
                            <p>
                                <span style="margin: 10px">{{item.username || item.leaveOrReplyUserName}}</span><span
                                    class="floor">第{{totals - (index+(currentPage4-1)*pageSize)}}楼</span>
                            </p>
                            <p class="leaving_content">{{item.content}}</p>
                            <div >
                                <el-row>
                                    <el-col :span="19" class="right">
                                        <el-popover placement="right" width="360" v-model="item.replysVisible">
                                            <p>回复留言</p>
                                            <el-input type="textarea" v-model="replysTextarea" placeholder="请输入...">
                                            </el-input>
                                            <div style="text-align: right; margin: 0">
                                                <el-button size="mini" type="text" @click="item.replysVisible = false">
                                                    取消
                                                </el-button>
                                                <el-button type="primary" size="mini" @click="replyComment(item)">确定
                                                </el-button>
                                            </div>
                                            <el-dropdown-item slot="reference">
                                                <el-button type="text">回复</el-button>
                                            </el-dropdown-item>
                                        </el-popover>

                                    </el-col>
                                    <el-col :span="4" v-if="(userInfoN.userid  == userInfo.id || userInfoN.id  == userInfo.id)">
                                        <el-popover placement="top-start" width="160" v-model="item.replysDelVisible">
                                            <p>确定删除吗？</p>
                                            <div style="text-align: right; margin: 0">
                                                <el-button size="mini" type="text"
                                                    @click="item.replysDelVisible = false">取消
                                                </el-button>
                                                <el-button type="primary" size="mini" @click="replyDel(item)">确定
                                                </el-button>
                                            </div>
                                            <el-dropdown-item slot="reference">
                                                <el-button type="text">删除</el-button>
                                            </el-dropdown-item>
                                        </el-popover>
                                    </el-col>
                                </el-row>
                            </div>
                            <ul class="photo_list clearFix" v-if="item.photoUrls !=''">
                                <li v-for="(itemIn, indexIn) in item.photoUrls.split(',')" :key="indexIn"
                                    class="leaving_img">
                                    <el-image :src="itemIn | pictureUrl"
                                        :preview-src-list="getPictureUrl(item.photoUrls.split(','))">
                                        <div slot="placeholder" class="image-slot">
                                            加载中<span class="dot">...</span>
                                        </div>
                                        <div slot="error" class="image-slot">
                                            <i class="el-icon-picture-outline"></i>
                                        </div>
                                    </el-image>
                                </li>
                            </ul>
                            <span class="time">{{item.creationtime}}</span>
                            <div class="reply" v-for="(itemIn, indexIn) in item.children" :key="indexIn">
                                <div class="avatar">
                                    <el-avatar :size="30" :src="itemIn.photo | pictureUrl" @error="errorHandler">
                                    </el-avatar>
                                </div>
                                <div class="leaving_detail" style="min-width:220px">
                                    <p>
                                        <el-button type="text">{{itemIn.leaveOrReplyUserName}}</el-button>
                                        <span class="reply_text">回复</span>
                                        <el-button type="text">{{itemIn.coverLeaveUser}}：</el-button>
                                    </p>
                                    <p class="leaving_content">{{itemIn.content}}</p>
                                    <ul class="photo_list clearFix" v-if="itemIn.photoUrls !=''">
                                        <li v-for="(itemIn1, indexIn1) in itemIn.photoUrls.split(',')" :key="indexIn1"
                                            class="leaving_img">
                                            <el-image :src="itemIn1 | pictureUrl"
                                                :preview-src-list="getPictureUrl(itemIn.photoUrls.split(','))">
                                                <div slot="placeholder" class="image-slot">
                                                    加载中<span class="dot">...</span>
                                                </div>
                                                <div slot="error" class="image-slot">
                                                    <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </li>
                                    </ul>
                                    <!-- 回复 -->
                                    <div >
                                        <el-row style="min-width:150px">
                                            <el-col :span="20" class="right">
                                                <el-popover placement="right" width="360" v-model="itemIn.replysVisible">
                                                    <p>回复留言</p>
                                                    <el-input type="textarea" v-model="replysTextarea"
                                                        placeholder="请输入...">
                                                    </el-input>
                                                    <div style="text-align: right; margin: 0">
                                                        <el-button size="mini" type="text"
                                                            @click="itemIn.replysVisible = false">
                                                            取消
                                                        </el-button>
                                                        <el-button type="primary" size="mini"
                                                            @click="replyComment(itemIn)">确定
                                                        </el-button>
                                                    </div>
                                                    <el-dropdown-item slot="reference">
                                                        <el-button type="text">回复</el-button>
                                                    </el-dropdown-item>
                                                </el-popover>
                                            </el-col>
                                            <el-col :span="4" v-if="(userInfoN.userid  == userInfo.id || userInfoN.id  == userInfo.id)">
                                                <el-popover placement="top-start" width="160"
                                                    v-model="itemIn.replysDelVisible">
                                                    <p>确定删除吗？</p>
                                                    <div style="text-align: right; margin: 0">
                                                        <el-button size="mini" type="text"
                                                            @click="itemIn.replysDelVisible = false">取消
                                                        </el-button>
                                                        <el-button type="primary" size="mini" @click="replyDel(itemIn)">
                                                            确定
                                                        </el-button>
                                                    </div>
                                                    <el-dropdown-item slot="reference">
                                                        <el-button type="text">删除</el-button>
                                                    </el-dropdown-item>
                                                </el-popover>
                                            </el-col>

                                        </el-row>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <el-divider></el-divider>
                <div class="block" v-if="totals >0">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage4" :page-sizes="[4, 10, 20, 40]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="totals">
                    </el-pagination>
                </div>
            </div>
        </div>
        <div class="dynamic">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane v-if="(userInfoN.userid  == userInfo.id || userInfoN.id  == userInfo.id)" label="我的空间"
                    name="5">
                    <DynamicCommon :dynamicType='activeName'></DynamicCommon>
                </el-tab-pane>
                <el-tab-pane v-else label="他的空间" name="40">
                    <DynamicCommon :dynamicType='activeName'></DynamicCommon>
                </el-tab-pane>
                <el-tab-pane label="空间动态" name="1"
                    v-if="(userInfoN.userid  == userInfo.id || userInfoN.id  == userInfo.id)">
                    <DynamicCommon :dynamicType='activeName'></DynamicCommon>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    import {
        pictureUrl
    } from '@/utils/filter'
    import DynamicCommon from '@/components/space/DynamicCommon'
    import Comment from '@c/comment/CommentLeave';
    import SpatialDynamics from "@c/dynamic/spatialDynamics"
    export default {
        props: ['userInfoN'],
        components: {
            Comment,
            DynamicCommon,
            SpatialDynamics
        },
        computed: {
            ...mapState({
                user: state => state.userModule.user,
                userInfo: state => state.userModule.userInfo
            })
        },
        created() {
            if (this.userInfoN.userid == this.userInfo.id || this.userInfoN.id == this.userInfo.id) {
                this.activeName = '5'
            } else {
                this.activeName = '40'
            }
            this.latestPhotos()
            this.getLeaveList()
            this.getMasterMessage()
        },
        mounted() {
            // if ((userInfoN.userid == userInfo.id || userInfoN.id == userInfo.id)) {
            //     this.activeName = '5'
            // } else {
            //     this.activeName = '40'
            // }
        },
        data() {
            return {
                dynamicType: 5,
                dynamicTypeMe: 0,
                masterVisible: false,
                replysTextarea: '',
                replysTextarea1: '',
                isReplay: true,
                textarea: '',
                srcList: [
                    require('../../assets/img/headportrait01.jpg'),
                    require('../../assets/img/headportrait02.jpg'),
                    require('../../assets/img/headportrait03.jpg')
                ],
                currentPage4: 1,
                pageSize: 4,
                totals: 0,
                activeName: '5',
                leaveList: {},
                latestPhotosList: [],
                masterMessageP: '欢迎光临'
            }
        },
        methods: {
            // 获取最新图片
            latestPhotos() {
                this.$store.dispatch("leaveModule/latestPhotos", {
                        page: 1,
                        pageSize: 8,
                        userid: this.userInfoN.userid || this.userInfoN.id,
                    })
                    .then(res => {
                        if (res.data.code == 200) {
                            this.latestPhotosList = res.data.result.list
                        }
                    });
            },
            // 设置用户寄语
            masterMessage() {
                if (this.replysTextarea1 == '') {
                    this.$message.warning('请先输入内容')
                } else {
                    this.$store.dispatch("leaveModule/masterMessage", {
                            content: this.replysTextarea1,
                            leaveUserId: this.userInfo.id,
                        })
                        .then(res => {
                            if (res.data.code == 200) {
                                this.$message.success('设置成功')
                                this.masterVisible = false
                                this.getMasterMessage()
                            }
                        });
                }
            },
            // 获取最新主人寄语
            getMasterMessage() {
                this.$store.dispatch("leaveModule/getMasterMessage", {
                        userid: this.userInfoN.userid || this.userInfoN.id,
                    })
                    .then(res => {
                        if (res.data.code == 200) {
                            this.masterMessageP = res.data.result.list[0].content
                        }
                    });
            },
            // 删除评论
            replyDel(params) {
                params.replysDelVisible = false
                this.$store
                    .dispatch("leaveModule/deleteLeave", {
                        id: params.id,
                        userid: this.userInfo.id,
                    })
                    .then(res => {
                        if (res.data.code == 200) {
                            this.$message.success('删除成功')
                            this.getLeaveList()
                        }
                    });
            },
            replyComment(params) {
                if (this.replysTextarea != '') {
                    this.$store
                    this.$store.dispatch('leaveModule/replyLeave', {
                        content: this.replysTextarea,
                        leaveId: params.id,
                        isReply: 1,
                        leaveUserId: this.userInfo.id,
                        // photoUrls: urls.join(','),
                        userid: params.leaveUserId
                    }).then(res => {
                        if (res.data.code == 200) {
                            params.replysVisible = false
                            this.$message.success('回复成功')
                            this.replysTextarea = ''
                            this.getLeaveList()
                        }
                    });
                } else {
                    this.$message.success('请先输入回复内容！')
                }
            },
            getPictureUrl(params) {
                var arr = []
                params.map(item => {
                    arr.push(pictureUrl(item))
                })
                return arr
            },
            // 获取动态
            dynamicPage() {
                this.$store.dispatch('dynamicModule/dynamicPage', {
                    limit: 10,
                    page: 1,
                    type: 1,
                    userId: this.userInfoN.userid || this.userInfoN.id,
                    hisUserId: this.userInfoN.userid || this.userInfoN.id,
                }).then(res => {
                    if (res.data.code == 200) {

                    }
                })
            },
            // 获取留言
            getLeaveList() {
                this.$store.dispatch('leaveModule/getLeaveList', {
                    page: this.currentPage4,
                    pageSize: this.pageSize,
                    userid: this.userInfoN.userid || this.userInfoN.id
                }).then(res => {
                    if (res.data.code == 200) {
                        this.leaveList = res.data.result
                        this.totals = this.leaveList.total
                    }
                })
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.getLeaveList()
            },
            handleCurrentChange(val) {
                this.currentPage4 = val
                this.getLeaveList()
            },
            errorHandler() {
                return true
            },
            handleClick(tab, event) {
            }
        }
    }
</script>

<style lang="scss" scoped>
    .right {
        text-align: right;
    }
    
    .el-col :hover {
        background-color: rgb(255, 255, 255);
    }
    .el-dropdown-menu__item {
        list-style: none;
        line-height: 36px;
        padding: 0 10px;
        margin: 0;
        font-size: 14px;
        color: #606266;
        cursor: pointer;
        outline: 0;
    }
    .main_warp {
        width: 100%;
        // margin-left: 20px;

        .photo {
            box-sizing: border-box;
            padding: 5px;
            background-color: white;

            h3 {
                font-size: 14px;
                text-align: left;
                border-bottom: 1px solid #ccc;
                padding-bottom: 5px;
            }

            .photo_list {
                list-style-type: none;
                padding-inline-start: 0;

                li {
                    float: left;
                    // box-sizing: border-box;
                    padding: 5px;
                    width: 160px;
                    height: 160px;
                    border: 1px solid #ccc;
                    margin-right: 10px;
                    margin-bottom: 10px;
                }
            }
        }

        .guestbook {
            box-sizing: border-box;
            padding: 5px;
            background-color: white;
            margin-top: 10px;

            h3 {
                font-size: 14px;
                text-align: left;
                border-bottom: 1px solid #ccc;
                padding-bottom: 5px;

                i {
                    margin-right: 6px;
                    font-size: 20px;
                }
            }

            .leaving {
                .block {
                    box-sizing: border-box;
                    padding: 10px 0;
                }

                .avatar {
                    float: left;
                }

                .leaving_detail {
                    // float: left;
                    text-align: left;
                    margin-left: 10px;

                    .reply {
                        margin-left: 25px;
                    }

                    p {
                        margin-block-start: 0;
                        margin-block-end: 0;

                        .floor {
                            color: #909399;
                            margin-left: 20px;
                            font-size: 12px;
                        }

                        .time {
                            color: #909399;
                            font-size: 12px;
                        }

                        span.time:nth-child(2) {
                            margin: 0 15px 0 10px;
                        }
                    }

                    .leaving_content {
                        color: #909399;
                        font-size: 16px;
                        margin-left: 45px;
                        margin-bottom: 12px;
                    }

                    .photo_list {
                        list-style-type: none;
                        padding-inline-start: 0;

                        li {
                            float: left;
                            box-sizing: border-box;
                            padding: 5px;
                            width: 180px;
                            min-height: 180px;
                            border: 1px solid #ccc;
                            margin-right: 10px;
                            margin-bottom: 10px;
                        }
                    }

                    .reply_text {
                        color: #909399;
                        margin: 0 10px;
                        font-size: 12px;
                    }

                    .reply_content {
                        color: #909399;
                        font-size: 16px;
                    }
                }
            }
        }

        .dynamic {
            box-sizing: border-box;
            padding: 5px;
            background-color: white;
            margin-top: 10px;
        }
    }

    .clearFix::after {
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }
</style>